iT邦幫忙

2023 iThome 鐵人賽

DAY 8
0
Vue.js

Vue3 - 從零開始學系列 第 8

Vue3 - 從零開始學 - Day8 - 表單 input

  • 分享至 

  • xImage
  •  

在上一個單元學習到了如何控制按鈕按下去所產生的事件,有了製作按鈕的經驗之後,在網頁上最常使用的輸入方式就是表單,也是在開發上最容易遇到的需求。

第一個最常使用的表單就是 input ,先宣告一個 input

<template>
  <input type="text" />
</template>

要讓這個表單與 Vue3 的邏輯產生連結,會需要宣告一個變數,且型別是字串:

<script>
export default {
  name: 'App',
  data() {
    return {
      name: '',
    };
  },
};
</script>

這裡宣告了一個變數 name,初始值是空白。而要讓變數 name 與 input 產生連結,需要使用 v-model 來產生綁定,就是關聯這兩個部分:

<template>
  <input type="text" v-model="name" />
</template>

使用 v-model 並且給予變數 name,就可以讓 name 與 input 綁定起來。

最後再把 name 顯示出來即可:

<template>
  {{ name }} <br />
  <input type="text" v-model="name" />
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      name: '',
    };
  },
};
</script>

當直接開啟網頁時,在 input 輸入框,輸入文字時,神奇的事情發生了,name 會自動顯示其 input 內容的值,而這個就是 v-model 所綁定的效果。

而除了使用 v-model 來進行變數綁定之外,Vue3 也針對了 v-model 提供額外的邏輯判斷。

例如 v-model.trim 可以去除前後空白:

<template>
  {{ name }} <br />
  <input type="text" v-model.trim="name" />
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      name: '',
    };
  },
};
</script>

v-model.lazy 可以在輸入完畢才會將內容儲存起來,換句話說就是將游標跳出,input 輸入框才會將值寫入到變數內:

<template>
  {{ name }} <br />
  <input type="text" v-model.lazy="name" />
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      name: '',
    };
  },
};
</script>

v-once 可以防止顯示的變數被更改,但其實只是不顯示被更新的值而已:

<template>
  <p v-once>{{ message }}</p>
  <br />
  <input type="text" v-model="message" />
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello',
    };
  },
};
</script>

v-pre 可以完全顯示標籤的內容,也就是在 <p></p> 裡面是什麼內容就顯示什麼內容:

<template>
  <p v-pre>{{ name }}</p>
  <br />
  <input type="text" v-model="name" />
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      name: '',
    };
  },
};
</script>

以上這個例子就會顯示:

{{ name }}

當然表單還有許多的控制選項可以使用,例如下拉式選單、checkbox ...等,這些將會在下一個單元繼續討論。

今日程式碼範例

關於鐵人賽

前端開發不會只有 Vue3.js 的工具要學習,還必須要學習如何網頁排版,這裡推薦從今日開始接收的另外一個挑戰:

tailwindcss - 從零開始學

這兩個挑戰,最後幾個單元會相連起來,變成一個共同思路的學習方式。

Vue3 - 從零開始學 - Day8 - [完]


上一篇
Vue3 - 從零開始學 - Day7 - Demo
下一篇
Vue3 - 從零開始學 - Day9 - 表單常用欄位
系列文
Vue3 - 從零開始學31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言